{% extends "layout.html" %}

{% block css_m %}
<link type="text/css" rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css">
<style>
    .sym_content, .date_content {
        margin-top: 3px;
    }
</style>
{% endblock %}
{% block js_m %}
<script type="text/javascript" src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/static/plugins/bootstrap-3.3.7-dist/js/bootstrap-datetimepicker.zh-CN.js"></script>
{% endblock %}

{% block content_body %}
<div class="page-jumbotron center-block" style="width: 800px">
    <h2>正在添加本店<strong class="text-primary">第{{ customer_idx }}位</strong>新客户</h1>
</div>
<div class="panel-body center-block" style="width: 800px">
    <form method="post" novalidate>
        {% csrf_token %}
        {% for field in form_add %}
        {% if field.label == '年龄' %}
        <div class="form-group">
            <label>{{ field.label }}(岁)</label>
            {{ field }}
            <span class="error_msg">{{ field.errors.0 }}</span>
        </div>
        {% elif field.label == '主要症状' %}
        <div class="form-group">
            <label>{{ field.label }}</label>
            {{ field }}
            <a class="sym_content btn btn-primary">鼻塞</a>
            <a class="sym_content btn btn-warning">喷嚏</a>
            <a class="sym_content btn btn-warning">流涕</a>
            <a class="sym_content btn btn-warning">头痛</a>
            <a class="sym_content btn btn-default">头晕</a>
            <a class="sym_content btn btn-default">失眠</a>
            <a class="sym_content btn btn-default">夜醒</a>
            <a class="sym_content btn btn-default">打鼾</a>
            <a class="sym_content btn btn-default">呼吸费力</a>
            <a class="sym_content btn btn-default">胸闷气短</a>
            <a class="sym_content btn btn-default">记忆力减退</a>

            <a class="btn btn-link" id="sym_clean">清除输入</a>
            <span class="error_msg">{{ field.errors.0 }}</span>

        </div>
        {% elif field.label == '病史' %}
        <div class="form-group">
            <label>{{ field.label }}(?年/?月/?年?月)</label>
            {{ field }}
            <a class="date_content btn btn-primary">年</a>
            <a class="date_content btn btn-default">月</a>
            <span class="error_msg">{{ field.errors.0 }}</span>

        </div>
        {% else %}
        <div class="form-group">
            <label>{{ field.label }}</label>
            {{ field }}
            <span class="error_msg">{{ field.errors.0 }}</span>
        </div>
        {% endif %}
        {% endfor %}
        <div class="btn-group" role="group">
            <button type="submit" class="btn btn-danger" style="width: 100px">提 交</button>
            <a class="btn btn-default" style="width: 100px" href="{% url 'customer_list' %}">取 消</a>
        </div>
        
        
        
    </form>

</div>








{% endblock %}

{% block content_bottom %}
<script>
    $(function () {
        // $.each(['#id_create_time', '#id_trail_or_bought', '#id_trial_counts'],
        //     function(idx, obj){
        //         $(obj).addClass('hidden');
        //         $(obj).before(
        //             "<p class='form-control-static'>"+$(obj).val()+"</p>"
        //         )

        //     }
        // );
        $("#id_c_source_self_defined").prop("disabled", true)
        $('#id_create_time,#id_trail_or_bought, #id_trial_counts').parent().addClass('hidden');
        $("#id_c_source").on('change', function(){
            var value = $("#id_c_source option:selected").attr("value");
            if(value==="6"){$("#id_c_source_self_defined").removeAttr("disabled")}else{$("#id_c_source_self_defined").val('');$("#id_c_source_self_defined").prop("disabled", true)}
        })
        $('#id_age').bind('input propertychange', function () {
            $('#id_birthday').val('');
            var age_ = $('#id_age').val();
            if (age_ !== "") {
                var cunqi = parseInt(age_)
                var myDate = new Date;
                myDate.setFullYear(myDate.getFullYear() - cunqi)
                var year = myDate.getFullYear(); //获取当前年

                var mon = myDate.getMonth() + 1; //获取当前月
                var date = myDate.getDate(); //获取当前日

                $('#id_birthday').val(year + "-" + mon + "-" + date);

            }


        });
        $('#id_birthday').bind('input propertychange', function () {
            $('#id_age').val('');
            var birthday = $('#id_birthday').val();
            if (birthday !== "") {
                var birth = new Date(birthday);
                var today = new Date;


                var birth_year = birth.getTime();
                var year_ = today.getTime();
                var age_ = Math.floor((year_ - birth_year) / (24 * 365 * 3600 * 1000))

                $('#id_age').val(age_);

            }


        });

        $('#id_ill_date_period').bind('input propertychange', function () {
            $('#id_date_be_ill').val('');
            var ill_period = $('#id_ill_date_period').val();
            if (ill_period !== "") {
                var ill_period_year = ill_period.match(/(\d+)年/)
                if (ill_period_year) {
                    ill_period_year = ill_period_year[1]
                } else { ill_period_year = 0 }

                var ill_period_month = ill_period.match(/(\d+)月/)
                if (ill_period_month) {
                    ill_period_month = ill_period_month[1]
                } else { ill_period_month = 0 }

                ill_period_year = parseInt(ill_period_year)
                ill_period_month = parseInt(ill_period_month)
                var myDate = new Date;
                myDate.setFullYear(myDate.getFullYear() - ill_period_year)
                myDate.setMonth(myDate.getMonth() - ill_period_month)
                var year = myDate.getFullYear(); //获取当前年

                var mon = myDate.getMonth() + 1; //获取当前月
                var date = myDate.getDate(); //获取当前日

                $('#id_date_be_ill').val(year + "-" + mon + "-" + date);

            }


        });
        $('#id_date_be_ill').bind('input propertychange', function () {
            $('#id_ill_date_period').val('');
            var ill_date = $('#id_date_be_ill').val();
            if (ill_date !== "") {
                ill_date = new Date(ill_date);
                var today = new Date;


                ill_date = ill_date.getTime();
                var today_ = today.getTime();
                var month_
                var ill_period
                var year_ = Math.floor((today_ - ill_date) / (24 * 365 * 3600 * 1000))
                if (year_) {
                    month_ = Math.floor((today_ - ill_date - (year_ * 24 * 365 * 3600 * 1000)) / (24 * 12 * 3600 * 1000))
                    ill_period = year_ + "年" + month_ + "月"
                } else {
                    month_ = Math.floor((today_ - ill_date) / (24 * 12 * 3600 * 1000))
                    ill_period = month_ + "月"

                }
                $('#id_ill_date_period').val(
                    ill_period
                );

            }


        });


        $('#id_birthday').datetimepicker({
            startDate: "2000-01-01",
            minView: "month",
            format: 'yyyy-mm-dd',
            language: 'zh-CN',
            autoclose: true,
            todayBtn: "linked",
            todayHighlight: true
        }).on('changeDate', function () {
            $('#id_age').val('');
            var birthday = $('#id_birthday').val();
            if (birthday !== "") {
                var birth = new Date(birthday);
                var today = new Date;


                var birth_year = birth.getTime();
                var year_ = today.getTime();
                var age_ = Math.floor((year_ - birth_year) / (24 * 365 * 3600 * 1000))

                $('#id_age').val(age_);

            }


        });;
        $('#id_create_time').datetimepicker({

            format: 'yyyy-mm-dd hh:ii',
            language: 'zh-CN',
            autoclose: true,
            todayBtn: "linked",
            todayHighlight: true
        });
        $('#id_date_be_ill').datetimepicker({

            format: 'yyyy-mm-dd',
            minView: "month",
            language: 'zh-CN',
            autoclose: true,
            todayBtn: "linked",
            todayHighlight: true
        }).on('changeDate', function () {
            $('#id_ill_date_period').val('');
            var ill_date = $('#id_date_be_ill').val();
            if (ill_date !== "") {
                ill_date = new Date(ill_date);
                var today = new Date;


                ill_date = ill_date.getTime();
                var today_ = today.getTime();
                var month_
                var ill_period
                var year_ = Math.floor((today_ - ill_date) / (24 * 365 * 3600 * 1000))
                if (year_) {
                    month_ = Math.floor((today_ - ill_date - (year_ * 24 * 365 * 3600 * 1000)) / (24 * 12 * 3600 * 1000))
                    ill_period = year_ + "年" + month_ + "月"
                } else {
                    month_ = Math.floor((today_ - ill_date) / (24 * 12 * 3600 * 1000))
                    ill_period = month_ + "月"

                }
                $('#id_ill_date_period').val(
                    ill_period
                );

            }


        });
        $(".sym_content").on("click", function () {
            if ($('#id_symptom').val().indexOf($(this).text()) === -1) {
                if ($('#id_symptom').val()) {
                    $('#id_symptom').val($('#id_symptom').val() + " " + $(this).text())
                } else { $('#id_symptom').val($('#id_symptom').val() + $(this).text()) }
            }
        });
        $("#sym_clean").on("click", function () {

            $('#id_symptom').val("")
        });
        $(".date_content").on("click", function () {
            if ($('#id_ill_date_period').val().indexOf($(this).text()) === -1) {
                
                    $('#id_ill_date_period').val($('#id_ill_date_period').val() + $(this).text())
               
            }
        });
    })

</script>
{% endblock %}